<template>
  <div>
    <div>
      <el-divider />
      <!-- <el-row>
        <el-form-item label="参数" prop="deployFileConf">
          <el-input
            v-model="form.deployFileConf"
            type="textarea"
            autosize
            placeholder="请输入参数"
            style="width: 700px"
            :disabled="processStep < form.publishStauts"
          />
        </el-form-item>
      </el-row> -->
      <el-row style="margin-bottom: 10px">
        <el-col :span="8">
          <el-input v-model.trim="queryName" clearable placeholder="请输入脚本名称" />
        </el-col>
        <el-button
          class="filter-item"
          size="mini"
          style="margin-left: 5px"
          type="success"
          icon="el-icon-search"
          @click="toQuery"
        >搜索
        </el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置
        </el-button>
      </el-row>
      <el-table :data="form.publishScriptList" border max-height="240">
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="scriptName" label="脚本名称" />
      </el-table>
    </div>
  </div>
</template>

<script>
// import convertScriptListApi from '@/api/script/transfer/script-convert-target-list'

export default {
  name: 'DeployFile',
  model: {
    prop: 'form',
    event: 'changes'
  },
  props: {
    form: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      processStep: 3,
      queryName: null,
      tempScriptList: []
    }
  },
  methods: {
    toQuery() {
      if (this.queryName === undefined || this.queryName === null || this.queryName === '') {
        this.resetQuery()
      } else {
        this.tempScriptList = JSON.parse(JSON.stringify(this.form.publishScriptList))
        this.form.publishScriptList = this.form.publishScriptList.filter((item) => {
          return item.scriptName.toUpperCase().includes(this.queryName.toUpperCase())
        })
      }
    },
    resetQuery() {
      this.queryName = null
      if (this.tempScriptList !== undefined && this.tempScriptList.length > 0) {
        this.form.publishScriptList = JSON.parse(JSON.stringify(this.tempScriptList))
        this.tempScriptList = []
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-transfer-panel {
  width: 400px !important;
}

::v-deep .bordered-button {
  border: #92dab3 2px;
}

::v-deep .el-transfer__buttons button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

::v-deep .el-transfer__buttons button:last-child {
  margin-left: 0px;
}
</style>
